<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>WebIM-DEMO</title>
    <link rel="stylesheet" href="/WebYiZhi/Public/webim/css/bootstrap.css" />
    <script src="/WebYiZhi/Public/webim/sdk/jquery-1.11.1.js"></script>
    <script src="/WebYiZhi/Public/webim/sdk/strophe.js"></script>
    <script src="/WebYiZhi/Public/webim/sdk/json2.js"></script>
    <script src="/WebYiZhi/Public/webim/sdk/easemob.im-1.0.7.js"></script>
    <script src="/WebYiZhi/Public/webim/easemob.im.config.js"></script>
    <script src="/WebYiZhi/Public/webim/bootstrap.js"></script>
    <link rel="stylesheet" href="/WebYiZhi/Public/webim/css/webim.css" />
    <!--[if lte IE 9]>
    <script src="/WebYiZhi/Public/webim/sdk/jplayer/jquery.jplayer.min.js"></script>
    <script src="/WebYiZhi/Public/webim/sdk/swfupload/swfupload.js"></script>
    <![endif]-->
    <script type="text/javascript">
        var curUserId = null;
        var curChatUserId = null;
        var conn = null;
        var curRoomId = null;
        var msgCardDivId = "chat01";
        var talkToDivId = "talkTo";
        var talkInputId = "talkInputId";
        var fileInputId = "fileInput";
        var bothRoster = [];
        var toRoster = [];
        var maxWidth = 200;
        var groupFlagMark = "group--";
        var groupQuering = false;
        var textSending = false;
        var time = 0;

        var swfupload = null;
        var flashFilename = '';
        var audioDom = [];

        //处理不支持<audio>标签的浏览器，当前只支持MP3
        var playAudioShim = function(dom, url, t) {
            var d = $(dom),
                    play = d.next(),
                    pause = play.next(),
                    u = url;
            if(!d.jPlayer) return;
            Easemob.im.Helper.getIEVersion() < 9 && audioDom.push(d);
            d.jPlayer({
                ready: function () {
                    $(this).jPlayer("setMedia", {
                        mp3: u
                    });
                },
                solution: (Easemob.im.Helper.getIEVersion() != 9 ? "html, flash" : "flash"),
                swfPath: "sdk/jplayer",
                supplied: "mp3",
                ended: function() {
                    pause.hide();
                    play.show();
                }
            });
            play.on('click', function(){
                d.jPlayer('play');
                play.hide();
                pause.show();
            });
            pause.on('click', function(){
                d.jPlayer('pause');
                play.show();
                pause.hide();
            });
        }

        //处理不支持异步上传的浏览器,使用swfupload作为解决方案
        var uploadType = null;
        var uploadShim = function(fileInputId) {
            var pageTitle = document.title;
            var uploadBtn = $('#' + fileInputId);
            if(typeof SWFUpload === 'undefined' || uploadBtn.length < 1) return;

            return new SWFUpload({
                file_post_name: 'file'
                , flash_url: "sdk/swfupload/swfupload.swf"
                , button_placeholder_id: fileInputId
                , button_width: uploadBtn.width() || 120
                , button_height: uploadBtn.height() || 30
                , button_cursor: SWFUpload.CURSOR.HAND
                , button_text: '点击上传'
                , button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT
                , file_size_limit: 10485760
                , file_upload_limit: 0
                , file_queued_handler: function(file) {
                    if(this.getStats().files_queued > 1) {
                        this.cancelUpload();
                    }
                    var checkType = uploadType === 'audio' ? audtype : pictype;
                    if(!checkType[file.type.slice(1)]) {
                        conn.onError({
                            type : EASEMOB_IM_UPLOADFILE_ERROR,
                            msg : '不支持此文件类型' + file.type
                        });
                        this.setButtonText('点击上传');
                        this.cancelUpload();
                    } else if(10485760 < file.size) {
                        conn.onError({
                            type : EASEMOB_IM_UPLOADFILE_ERROR,
                            msg : '文件大小超过限制！请上传大小不超过10M的文件'
                        });
                        this.setButtonText('点击上传');
                        this.cancelUpload();
                    } else {
                        this.setButtonText(file.name);
                        flashFilename = file.name;
                    }
                }
                , file_dialog_start_handler: function() {
                    if(Easemob.im.Helper.getIEVersion() < 10) {
                        document.title = pageTitle;
                    }
                }
                , upload_error_handler: function(file, code, msg){
                    if(code != SWFUpload.UPLOAD_ERROR.FILE_CANCELLED && code != SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED && code != SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED) {
                        this.uploadOptions.onFileUploadError && this.uploadOptions.onFileUploadError({type: EASEMOB_IM_UPLOADFILE_ERROR, msg: msg});
                    }
                }
                , upload_complete_handler: function(){
                    this.setButtonText('点击上传');
                }
                , upload_success_handler: function(file, response){
                    //处理上传成功的回调
                    try{
                        var res = Easemob.im.Helper.parseUploadResponse(response);

                        res = $.parseJSON(res);
                        res.filename = file.name;
                        this.uploadOptions.onFileUploadComplete && this.uploadOptions.onFileUploadComplete(res);
                    } catch (e) {
                        conn.onError({
                            type : EASEMOB_IM_UPLOADFILE_ERROR,
                            msg : '上传图片发生错误'
                        });
                    }
                }
            });
        }


        //提供上传接口
        var flashUpload = function(url, options){
            if(swfupload.settings.button_text == '点击上传') {
                conn.onError({
                    type : EASEMOB_IM_UPLOADFILE_ERROR,
                    msg : '请选择文件'
                });
                return;
            }
            swfupload.setUploadURL(url);
            swfupload.uploadOptions = options;
            swfupload.startUpload();
        }

        window.URL = window.URL || window.webkitURL || window.mozURL
                || window.msURL;
        var getLoginInfo = function() {
            return {
                isLogin : false
            };
        };
        var showLoginUI = function() {
            $('#loginmodal').modal('show');
            $('#username').focus();
        };
        var hiddenLoginUI = function() {
            $('#loginmodal').modal('hide');
        };
        var showWaitLoginedUI = function() {
            $('#waitLoginmodal').modal('show');
        };
        var hiddenWaitLoginedUI = function() {
            $('#waitLoginmodal').modal('hide');
        };
        var showChatUI = function() {
            $('#content').css({
                "display" : "block"
            });
            var login_userEle = document.getElementById("login_user").children[0];
            login_userEle.innerHTML = curUserId;
            login_userEle.setAttribute("title", curUserId);
        };
        //登录之前不显示web对话框
        var hiddenChatUI = function() {
            $('#content').css({
                "display" : "none"
            });
            document.getElementById(talkInputId).value = "";
        };
        //定义消息编辑文本域的快捷键，enter和ctrl+enter为发送，alt+enter为换行
        //控制提交频率
        $(function() {
            $("textarea").keydown(function(event) {
                if (event.altKey && event.keyCode == 13) {
                    e = $(this).val();
                    $(this).val(e + '\n');
                } else if (event.ctrlKey && event.keyCode == 13) {
                    //e = $(this).val();
                    //$(this).val(e + '<br>');
                    event.returnValue = false;
                    sendText();
                    return false;
                } else if (event.keyCode == 13) {
                    event.returnValue = false;
                    sendText();
                    return false;
                }
            });
            $("#usetoken").on("click", function(){
                if ($("#password").attr("disabled")) {
                    $("#password").removeAttr("disabled");
                } else {
                    $("#password").attr("disabled", "disabled");
                }
                if ($("#token").attr("disabled")) {
                    $("#token").removeAttr("disabled");
                } else {
                    $("#token").attr("disabled", "disabled");
                }
            });
        });
        //easemobwebim-sdk注册回调函数列表
        $(document).ready(function() {

            if(!Easemob.im.Helper.isCanUploadFileAsync && typeof uploadShim === 'function') {
                swfupload = uploadShim('fileInput');
            }
            handleConfig();
            conn = new Easemob.im.Connection();
            //初始化连接
            conn.init({
                https : Easemob.im.config.https,
                url: Easemob.im.config.xmppURL,
                //当连接成功时的回调方法
                onOpened : function() {
                    handleOpen(conn);
                },
                //当连接关闭时的回调方法
                onClosed : function() {
                    handleClosed();
                },
                //收到文本消息时的回调方法
                onTextMessage : function(message) {
                    handleTextMessage(message);
                },
                //收到表情消息时的回调方法
                onEmotionMessage : function(message) {
                    handleEmotion(message);
                },
                //收到图片消息时的回调方法
                onPictureMessage : function(message) {
                    handlePictureMessage(message);
                },
                //收到音频消息的回调方法
                onAudioMessage : function(message) {
                    handleAudioMessage(message);
                },
                //收到位置消息的回调方法
                onLocationMessage : function(message) {
                    handleLocationMessage(message);
                },
                //收到文件消息的回调方法
                onFileMessage : function(message) {
                    handleFileMessage(message);
                },
                //收到视频消息的回调方法
                onVideoMessage : function(message) {
                    handleVideoMessage(message);
                },
                //收到联系人订阅请求的回调方法
                onPresence : function(message) {
                    handlePresence(message);
                },
                //收到联系人信息的回调方法
                onRoster : function(message) {
                    handleRoster(message);
                },
                //收到群组邀请时的回调方法
                onInviteMessage : function(message) {
                    handleInviteMessage(message);
                },
                //异常时的回调方法
                onError : function(message) {
                    handleError(message);
                }
            });
            var loginInfo = getLoginInfo();
            if (loginInfo.isLogin) {
                showWaitLoginedUI();
            } else {
                showLoginUI();
            }
            //发送文件的模态窗口
            $('#fileModal').on('hidden.bs.modal', function(e) {
                document.getElementById("fileSend").disabled = false;
                document.getElementById("cancelfileSend").disabled = false;

                if(!Easemob.im.Helper.isCanUploadFileAsync) return;
                var ele = document.getElementById(fileInputId);
                ele.value = "";
                if (!window.addEventListener) {
                    ele.outerHTML = ele.outerHTML;
                }
            });
            $('#addFridentModal').on('hidden.bs.modal', function(e) {
                var ele = document.getElementById("addfridentId");
                ele.value = "";
                if (!window.addEventListener) {
                    ele.outerHTML = ele.outerHTML;
                }
                document.getElementById("addFridend").disabled = false;
                document.getElementById("cancelAddFridend").disabled = false;
            });
            $('#delFridentModal').on('hidden.bs.modal', function(e) {
                var ele = document.getElementById("delfridentId");
                ele.value = "";
                if (!window.addEventListener) {
                    ele.outerHTML = ele.outerHTML;
                }
                document.getElementById("delFridend").disabled = false;
                document.getElementById("canceldelFridend").disabled = false;
            });
            $('#confirm-block-div-modal').on('hidden.bs.modal', function(e) {
            });
            $('#option-room-div-modal').on('hidden.bs.modal', function(e) {
            });
            $('#notice-block-div').on('hidden.bs.modal', function(e) {
            });
            $('#regist-div-modall').on('hidden.bs.modal', function(e) {
            });
            //在 密码输入框时的回车登录
            $('#password').keypress(function(e) {
                var key = e.which;
                if (key == 13) {
                    login();
                }
            });
            $(function() {
                $(window).bind('beforeunload', function() {
                    if (conn) {
                        conn.close();
                        if (navigator.userAgent.indexOf("Firefox") > 0)
                            return ' ';
                        else
                            return '';
                    }
                });
            });
        });
        var handleConfig = function() {
            if(Easemob.im.Helper.getIEVersion() < 10) {
                Easemob.im.config.https = location.protocol == 'https:' ? true : false;
                if(!Easemob.im.config.https) {
                    if(Easemob.im.config.xmppURL.indexOf('https') == 0) {
                        Easemob.im.config.xmppURL = Easemob.im.config.xmppURL.replace(/^https/, 'http');
                    }
                    if(Easemob.im.config.apiURL.indexOf('https') == 0) {
                        Easemob.im.config.apiURL = Easemob.im.config.apiURL.replace(/^https/, 'http');
                    }
                } else {
                    if(Easemob.im.config.xmppURL.indexOf('https') != 0) {
                        Easemob.im.config.xmppURL = Easemob.im.config.xmppURL.replace(/^http/, 'https');
                    }
                    if(Easemob.im.config.apiURL.indexOf('https') != 0) {
                        Easemob.im.config.apiURL = Easemob.im.config.apiURL.replace(/^http/, 'https');
                    }
                }
            }
        }
        //处理连接时函数,主要是登录成功后对页面元素做处理
        var handleOpen = function(conn) {
            //从连接中获取到当前的登录人注册帐号名
            curUserId = conn.context.userId;
            //获取当前登录人的联系人列表
            conn.getRoster({
                success : function(roster) {
                    // 页面处理
                    hiddenWaitLoginedUI();
                    showChatUI();
                    var curroster;
                    for ( var i in roster) {
                        var ros = roster[i];
                        //both为双方互为好友，要显示的联系人,from我是对方的单向好友
                        if (ros.subscription == 'both'
                                || ros.subscription == 'from') {
                            bothRoster.push(ros);
                        } else if (ros.subscription == 'to') {
                            //to表明了联系人是我的单向好友
                            toRoster.push(ros);
                        }
                    }
                    if (bothRoster.length > 0) {
                        curroster = bothRoster[0];
                        buildContactDiv("contractlist", bothRoster);//联系人列表页面处理
                        if (curroster)
                            setCurrentContact(curroster.name);//页面处理将第一个联系人作为当前聊天div
                    }
                    //获取当前登录人的群组列表
                    conn.listRooms({
                        success : function(rooms) {
                            if (rooms && rooms.length > 0) {
                                buildListRoomDiv("contracgrouplist", rooms);//群组列表页面处理
                                if (curChatUserId == null) {
                                    setCurrentContact(groupFlagMark
                                            + rooms[0].roomId);
                                    $('#accordion2').click();
                                }
                            }
                            conn.setPresence();//设置用户上线状态，必须调用
                        },
                        error : function(e) {
                        }
                    });
                }
            });
            //启动心跳
            if (conn.isOpened()) {
                conn.heartBeat(conn);
            }
        };
        //连接中断时的处理，主要是对页面进行处理
        var handleClosed = function() {
            curUserId = null;
            curChatUserId = null;
            curRoomId = null;
            bothRoster = [];
            toRoster = [];
            hiddenChatUI();
            for(var i=0,l=audioDom.length;i<l;i++) {
                if(audioDom[i].jPlayer) audioDom[i].jPlayer('destroy');
            }
            clearContactUI("contactlistUL", "contactgrouplistUL",
                    "momogrouplistUL", msgCardDivId);
            showLoginUI();
            groupQuering = false;
            textSending = false;
        };

        //easemobwebim-sdk中收到联系人订阅请求的处理方法，具体的type值所对应的值请参考xmpp协议规范
        var handlePresence = function(e) {
            //（发送者希望订阅接收者的出席信息），即别人申请加你为好友
            if (e.type == 'subscribe') {
                if (e.status) {
                    if (e.status.indexOf('resp:true') > -1) {
                        agreeAddFriend(e.from);
                        return;
                    }
                }
                var subscribeMessage = e.from + "请求加你为好友。\n验证消息：" + e.status;
                showNewNotice(subscribeMessage);
                $('#confirm-block-footer-confirmButton').click(function() {
                    //同意好友请求
                    agreeAddFriend(e.from);//e.from用户名
                    //反向添加对方好友
                    conn.subscribe({
                        to : e.from,
                        message : "[resp:true]"
                    });
                    $('#confirm-block-div-modal').modal('hide');
                });
                $('#confirm-block-footer-cancelButton').click(function() {
                    rejectAddFriend(e.from);//拒绝加为好友
                    $('#confirm-block-div-modal').modal('hide');
                });
                return;
            }
            //(发送者允许接收者接收他们的出席信息)，即别人同意你加他为好友
            if (e.type == 'subscribed') {
                toRoster.push({
                    name : e.from,
                    jid : e.fromJid,
                    subscription : "to"
                });
                return;
            }
            //（发送者取消订阅另一个实体的出席信息）,即删除现有好友
            if (e.type == 'unsubscribe') {
                //单向删除自己的好友信息，具体使用时请结合具体业务进行处理
                delFriend(e.from);
                return;
            }
            //（订阅者的请求被拒绝或以前的订阅被取消），即对方单向的删除了好友
            if (e.type == 'unsubscribed') {
                delFriend(e.from);
                return;
            }
        };
        //easemobwebim-sdk中处理出席状态操作
        var handleRoster = function(rosterMsg) {
            for (var i = 0; i < rosterMsg.length; i++) {
                var contact = rosterMsg[i];
                if (contact.ask && contact.ask == 'subscribe') {
                    continue;
                }
                if (contact.subscription == 'to') {
                    toRoster.push({
                        name : contact.name,
                        jid : contact.jid,
                        subscription : "to"
                    });
                }
                //app端删除好友后web端要同时判断状态from做删除对方的操作
                if (contact.subscription == 'from') {
                    toRoster.push({
                        name : contact.name,
                        jid : contact.jid,
                        subscription : "from"
                    });
                }
                if (contact.subscription == 'both') {
                    var isexist = contains(bothRoster, contact);
                    if (!isexist) {
                        var lielem = $('<li>').attr({
                            "id" : contact.name,
                            "class" : "offline",
                            "className" : "offline"
                        }).click(function() {
                            chooseContactDivClick(this);
                        });
                        $('<img>').attr({
                            "src" : "/WebYiZhi/Public/webim/img/"+"head/contact_normal.png"
                        }).appendTo(lielem);
                        $('<span>').html(contact.name).appendTo(lielem);
                        $('#contactlistUL').append(lielem);
                        bothRoster.push(contact);
                    }
                }
                if (contact.subscription == 'remove') {
                    var isexist = contains(bothRoster, contact);
                    if (isexist) {
                        removeFriendDomElement(contact.name);
                    }
                }
            }
        };
        //异常情况下的处理方法
        var handleError = function(e) {
            e && e.upload && $('#fileModal').modal('hide');
            if (curUserId == null) {
                hiddenWaitLoginedUI();
//                alert(e.msg + ",请重新登录");
                showLoginUI();
            } else {
                var msg = e.msg;
                if (e.type == EASEMOB_IM_CONNCTION_SERVER_CLOSE_ERROR) {
                    if (msg == "" || msg == 'unknown' ) {
                        alert("服务器断开连接,可能是因为在别处登录");
                    } else {
                        alert("服务器断开连接");
                    }
                } else if (e.type === EASEMOB_IM_CONNCTION_SERVER_ERROR) {
                    if (msg.toLowerCase().indexOf("user removed") != -1) {
                        alert("用户已经在管理后台删除");
                    }
                } else {
                    alert(msg);
                }
            }
            conn.stopHeartBeat(conn);
        };
        //判断要操作的联系人和当前联系人列表的关系
        var contains = function(roster, contact) {
            var i = roster.length;
            while (i--) {
                if (roster[i].name === contact.name) {
                    return true;
                }
            }
            return false;
        };
        Array.prototype.indexOf = function(val) {
            for (var i = 0; i < this.length; i++) {
                if (this[i].name == val.name)
                    return i;
            }
            return -1;
        };
        Array.prototype.remove = function(val) {
            var index = this.indexOf(val);
            if (index > -1) {
                this.splice(index, 1);
            }
        };
        $(function()
                {
                    login();
                }

        )
        //登录系统时的操作方法
        var login = function() {
            if ($("#usetoken").is(":checked")) {
                var user = $("#username").val();
                var token = $("#token").val();
                if (user == '' || token == '') {
                    alert("请输入用户名和令牌");
                    return;
                }
                hiddenLoginUI();
                showWaitLoginedUI();
                //根据用户名令牌登录系统
                conn.open({
                    apiUrl : Easemob.im.config.apiURL,
                    user : user,
                    accessToken : token,
                    //连接时提供appkey
                    appKey : Easemob.im.config.appkey
                });
            } else {
                var user ="<?php echo ($doctorinfo['bmob_username']); ?>";
                var pass ="<?php echo ($doctorinfo['bmob_password']); ?>";
                if (user == '' || pass == '') {
                    alert("请输入用户名和密码");
                    return;
                }
                hiddenLoginUI();
                showWaitLoginedUI();
                //根据用户名密码登录系统
                conn.open({
                    apiUrl : Easemob.im.config.apiURL,
                    user : user,
                    pwd : pass,
                    //连接时提供appkey
                    appKey : Easemob.im.config.appkey
                });
            }
            return false;
        };
        //注册新用户操作方法
        var regist = function() {
            var user = $("#regist_username").val();
            var pass = $("#regist_password").val();
            var nickname = $("#regist_nickname").val();
            if (user == '' || pass == '' || nickname == '') {
                alert("用户名/密码/昵称 不能为空");
                return;
            }
            var options = {
                username : user,
                password : pass,
                nickname : nickname,
                appKey : Easemob.im.config.appkey,
                success : function(result) {
                    alert("注册成功!");
                    $('#loginmodal').modal('show');
                    $('#regist-div-modal').modal('hide');
                },
                error : function(e) {
                    alert(e.error);
                },
                apiUrl : Easemob.im.config.apiURL
            };
            Easemob.im.Helper.registerUser(options);
        };
        //注册页面返回登录页面操作
        var showlogin = function() {
            $('#loginmodal').modal('show');
            $('#regist-div-modal').modal('hide');
        };
        var logout = function() {
            window.top.opener = null; window.close();
        };
        //设置当前显示的聊天窗口div，如果有联系人则默认选中联系人中的第一个联系人，如没有联系人则当前div为null-nouser
        var setCurrentContact = function(defaultUserId) {
            showContactChatDiv(defaultUserId);
            if (curChatUserId != null) {
                hiddenContactChatDiv(curChatUserId);
            } else {
                $('#null-nouser').css({
                    "display" : "none"
                });
            }
            curChatUserId = defaultUserId;
        };
        //构造联系人列表

        var buildContactDiv = function(contactlistDivId, roster) {
            var uielem = document.getElementById("contactlistUL");
            var cache = {};
            for (i = 0; i < roster.length; i++) {
                if (!(roster[i].subscription == 'both' || roster[i].subscription == 'from')) {
                    continue;
                }
                var jid = roster[i].jid;
                var userName = jid.substring(jid.indexOf("_") + 1).split("@")[0];
                if (userName in cache) {
                    continue;
                }
                cache[userName] = true;
                var lielem = $('<li>').attr({
                    'id' : userName,
                    'class' : 'offline',
                    'className' : 'offline',
                    'type' : 'chat',
                    'displayName' : userName
                }).click(function() {
                    chooseContactDivClick(this);
                });
                $('<img>').attr("src", "/WebYiZhi/Public/webim/img/"+"head/contact_normal.png").appendTo(
                        lielem);
              $('<span>').html(userName).appendTo(lielem);
                $('#contactlistUL').append(lielem);
            }
            var contactlist = document.getElementById(contactlistDivId);
            var children = contactlist.children;
            if (children.length > 0) {
                contactlist.removeChild(children[0]);
            }
            contactlist.appendChild(uielem);
        };
        //构造群组列表
        var buildListRoomDiv = function(contactlistDivId, rooms) {
            var uielem = document.getElementById("contactgrouplistUL");
            var cache = {};
            for (i = 0; i < rooms.length; i++) {
                var roomsName = rooms[i].name;
                var roomId = rooms[i].roomId;
                if (roomId in cache) {
                    continue;
                }
                cache[roomId] = true;
                var lielem = $('<li>').attr({
                    'id' : groupFlagMark + roomId,
                    'class' : 'offline',
                    'className' : 'offline',
                    'type' : 'groupchat',
                    'displayName' : roomsName,
                    'roomId' : roomId,
                    'joined' : 'false'
                }).click(function() {
                    chooseContactDivClick(this);
                });
                $('<img>').attr({
                    'src' : "/WebYiZhi/Public/webim/img/"+'head/group_normal.png'
                }).appendTo(lielem);
                $('<span>').html(roomsName).appendTo(lielem);
                $('#contactgrouplistUL').append(lielem);
            }
            var contactlist = document.getElementById(contactlistDivId);
            var children = contactlist.children;
            if (children.length > 0) {
                contactlist.removeChild(children[0]);
            }
            contactlist.appendChild(uielem);
        };
        //选择联系人的处理
        var getContactLi = function(chatUserId) {
            return document.getElementById(chatUserId);
        };
        //构造当前聊天记录的窗口div
        var getContactChatDiv = function(chatUserId) {
            return document.getElementById(curUserId + "-" + chatUserId);
        };
        //如果当前没有某一个联系人的聊天窗口div就新建一个
        var createContactChatDiv = function(chatUserId) {
            var msgContentDivId = curUserId + "-" + chatUserId;
            var newContent = document.createElement("div");
            $(newContent).attr({
                "id" : msgContentDivId,
                "class" : "chat01_content",
                "className" : "chat01_content",
                "style" : "display:none"
            });
            return newContent;
        };
        //显示当前选中联系人的聊天窗口div，并将该联系人在联系人列表中背景色置为蓝色
        var showContactChatDiv = function(chatUserId) {
            var contentDiv = getContactChatDiv(chatUserId);
            if (contentDiv == null) {
                contentDiv = createContactChatDiv(chatUserId);
                document.getElementById(msgCardDivId).appendChild(contentDiv);
            }
            contentDiv.style.display = "block";
            var contactLi = document.getElementById(chatUserId);
            if (contactLi == null) {
                return;
            }
            contactLi.style.backgroundColor = "#33CCFF";
            var dispalyTitle = null;//聊天窗口显示当前对话人名称
            if (chatUserId.indexOf(groupFlagMark) >= 0) {
                dispalyTitle = "群组" + $(contactLi).attr('displayname') + "聊天中";
                curRoomId = $(contactLi).attr('roomid');
                $("#roomMemberImg").css('display', 'block');
            } else {
                dispalyTitle = "与" + chatUserId + "聊天中";
                $("#roomMemberImg").css('display', 'none');
            }
            document.getElementById(talkToDivId).children[0].innerHTML = dispalyTitle;
        };
        //对上一个联系人的聊天窗口div做隐藏处理，并将联系人列表中选择的联系人背景色置空
        var hiddenContactChatDiv = function(chatUserId) {
            var contactLi = document.getElementById(chatUserId);
            if (contactLi) {
                contactLi.style.backgroundColor = "";
            }
            var contentDiv = getContactChatDiv(chatUserId);
            if (contentDiv) {
                contentDiv.style.display = "none";
            }
        };
        //切换联系人聊天窗口div
        var chooseContactDivClick = function(li) {
            var chatUserId = li.id;
            if ($(li).attr("type") == 'groupchat' && ('true' != $(li).attr("joined"))) {
                conn.join({
                    roomId : $(li).attr("roomId")
                });
                $(li).attr("joined", "true");
            }
            if (chatUserId != curChatUserId) {
                if (curChatUserId == null) {
                    showContactChatDiv(chatUserId);
                } else {
                    showContactChatDiv(chatUserId);
                    hiddenContactChatDiv(curChatUserId);
                }
                curChatUserId = chatUserId;
            }
            //对默认的null-nouser div进行处理,走的这里说明联系人列表肯定不为空所以对默认的聊天div进行处理
            $('#null-nouser').css({
                "display" : "none"
            });
            var badgespan = $(li).children(".badge");
            if (badgespan && badgespan.length > 0) {
                li.removeChild(li.children[2]);
            }
            //点击有未读消息对象时对未读消息提醒的处理
            var badgespanGroup = $(li).parent().parent().parent().find(".badge");
            if (badgespanGroup && badgespanGroup.length == 0) {
                $(li).parent().parent().parent().prev().children().children()
                        .remove();
            }
        };
        var clearContactUI = function(contactlistUL, contactgrouplistUL,
                                      momogrouplistUL, contactChatDiv) {
            //清除左侧联系人内容
            $('#contactlistUL').empty();
            $('#contactgrouplistUL').empty();
            $('#momogrouplistUL').empty();
            //处理联系人分组的未读消息处理
            var accordionChild = $('#accordionDiv').children();
            for (var i = 1; i <= accordionChild.length; i++) {
                var badgegroup = $('#accordion' + i).find(".badgegroup");
                if (badgegroup && badgegroup.length > 0) {
                    $('#accordion' + i).children().remove();
                }
            }
            ;
            //清除右侧对话框内容
            document.getElementById(talkToDivId).children[0].innerHTML = "";
            var chatRootDiv = document.getElementById(contactChatDiv);
            var children = chatRootDiv.children;
            for (var i = children.length - 1; i > 1; i--) {
                chatRootDiv.removeChild(children[i]);
            }
            $('#null-nouser').css({
                "display" : "block"
            });
        };
        var emotionFlag = false;
        var showEmotionDialog = function() {
            if (emotionFlag) {
                $('#wl_faces_box').css({
                    "display" : "block"
                });
                return;
            }
            emotionFlag = true;
            // Easemob.im.Helper.EmotionPicData设置表情的json数组
            var sjson = Easemob.im.Helper.EmotionPicData;
            for ( var key in sjson) {
                var emotions = $('<img>').attr({
                    "id" : key,
                    "src" : sjson[key],
                    "style" : "cursor:pointer;"
                }).click(function() {
                    selectEmotionImg(this);
                });
                $('<li>').append(emotions).appendTo($('#emotionUL'));
            }
            $('#wl_faces_box').css({
                "display" : "block"
            });
        };
        //表情选择div的关闭方法
        var turnoffFaces_box = function() {
            $("#wl_faces_box").fadeOut("slow");
        };
        var selectEmotionImg = function(selImg) {
            var txt = document.getElementById(talkInputId);
            txt.value = txt.value + selImg.id;
            txt.focus();
        };
        var showSendPic = function() {
            $('#fileModal').modal('toggle');
            $('#sendfiletype').val('pic');
            $('#send-file-warning').html("");
            uploadType = 'pic';
        };
        var showSendAudio = function() {
            $('#fileModal').modal('toggle');
            $('#sendfiletype').val('audio');
            $('#send-file-warning').html("");
            uploadType = 'audio';
        };
        var sendText = function() {
            if (textSending) {
                return;
            }
            textSending = true;
            var msgInput = document.getElementById(talkInputId);
            var msg = msgInput.value;
            if (msg == null || msg.length == 0) {
                return;
            }
            var to = curChatUserId;
            if (to == null) {
                return;
            }
            var options = {
                to : to,
                //to:'msgto',
                msg : msg,
                type : "chat"
            };
            // 群组消息和个人消息的判断分支
            if (curChatUserId.indexOf(groupFlagMark) >= 0) {
                options.type = 'groupchat';
                options.to = curRoomId;
            }
            //easemobwebim-sdk发送文本消息的方法 to为发送给谁，meg为文本消息对象
            conn.sendTextMessage(options);
            //当前登录人发送的信息在聊天窗口中原样显示
            var msgtext = msg.replace(/\n/g, '<br>');
            appendMsg(curUserId, to, msgtext);
            turnoffFaces_box();
            msgInput.value = "";
            msgInput.focus();
            setTimeout(function() {
                textSending = false;
            }, 1000);
        };
        var pictype = {
            "jpg" : true,
            "gif" : true,
            "png" : true,
            "bmp" : true
        };
        var sendFile = function() {
            var type = $("#sendfiletype").val();
            if (type == 'pic') {
                sendPic();
            } else {
                sendAudio();
            }
        };
        //发送图片消息时调用方法
        var sendPic = function() {
            var to = curChatUserId;
            if (to == null) {
                return;
            }
            // Easemob.im.Helper.getFileUrl为easemobwebim-sdk获取发送文件对象的方法，fileInputId为 input 标签的id值
            var fileObj = Easemob.im.Helper.getFileUrl(fileInputId);
            if (Easemob.im.Helper.isCanUploadFileAsync && (fileObj.url == null || fileObj.url == '')) {
                $('#send-file-warning').html("<font color='#FF0000'>请选择发送图片</font>");
                return;
            }
            var filetype = fileObj.filetype;
            var filename = fileObj.filename;
            if (!Easemob.im.Helper.isCanUploadFileAsync || filetype in pictype) {
                document.getElementById("fileSend").disabled = true;
                document.getElementById("cancelfileSend").disabled = true;
                var opt = {
                    type : 'chat',
                    fileInputId : fileInputId,
                    filename : flashFilename || '',
                    to : to,
                    apiUrl: Easemob.im.config.apiURL,
                    onFileUploadError : function(error) {
                        $('#fileModal').modal('hide');
                        var messageContent = (error.msg || '') + ",发送图片文件失败:" + (filename||flashFilename);
                        appendMsg(curUserId, to, messageContent);
                    },
                    onFileUploadComplete : function(data) {
                        var file = document.getElementById(fileInputId);
                        if (file && file.files) {
                            var objUrl = getObjectURL(file.files[0]);
                            if (objUrl) {
                                var img = document.createElement("img");
                                img.src = objUrl;
                                img.width = maxWidth;
                            }
                        } else {
                            filename = data.filename || '';
                            var img = document.createElement("img");
                            img.src = data.uri + '/' + data.entities[0].uuid + '?token=';
                            img.width = maxWidth;
                        }
                        appendMsg(curUserId, to, {
                            data : [ {
                                type : 'pic',
                                filename : (filename||flashFilename),
                                data : img
                            } ]
                        });
                        $('#fileModal').modal('hide');
                    },
                    flashUpload: flashUpload
                };
                if (curChatUserId.indexOf(groupFlagMark) >= 0) {
                    opt.type = 'groupchat';
                    opt.to = curRoomId;
                }
                conn.sendPicture(opt);
                return;
            }
            $('#send-file-warning').html("<font color='#FF0000'>不支持此图片类型" + filetype + "</font>");
        };
        var audtype = {
            "mp3" : true,
            "wma" : true,
            "wav" : true,
            "amr" : true,
            "avi" : true
        };
        //发送音频消息时调用的方法
        var sendAudio = function() {
            var to = curChatUserId;
            if (to == null) {
                return;
            }
            //利用easemobwebim-sdk提供的方法来构造一个file对象
            var fileObj = Easemob.im.Helper.getFileUrl(fileInputId);
            if (Easemob.im.Helper.isCanUploadFileAsync && (fileObj.url == null || fileObj.url == '')) {
                $('#send-file-warning').html("<font color='#FF0000'>请选择发送音频</font>");
                return;
            }
            var filetype = fileObj.filetype;
            var filename = fileObj.filename;
            if (!Easemob.im.Helper.isCanUploadFileAsync || filetype in audtype) {
                document.getElementById("fileSend").disabled = true;
                document.getElementById("cancelfileSend").disabled = true;
                var opt = {
                    type : "chat",
                    fileInputId : fileInputId,
                    filename : flashFilename || '',
                    to : to,//发给谁
                    apiUrl: Easemob.im.config.apiURL,
                    onFileUploadError : function(error) {
                        $('#fileModal').modal('hide');
                        var messageContent = (error.msg || '') + ",发送音频失败:" + (filename || flashFilename);
                        appendMsg(curUserId, to, messageContent);
                    },
                    onFileUploadComplete : function(data) {
                        var messageContent = "发送音频" + (filename || flashFilename);
                        $('#fileModal').modal('hide');
                        appendMsg(curUserId, to, messageContent);
                    },
                    flashUpload: flashUpload
                };
                //构造完opt对象后调用easemobwebim-sdk中发送音频的方法
                if (curChatUserId.indexOf(groupFlagMark) >= 0) {
                    opt.type = 'groupchat';
                    opt.to = curRoomId;
                }
                conn.sendAudio(opt);
                return;
            }
            $('#send-file-warning').html("<font color='#FF0000'>不支持此音频类型" + filetype + "</font>");
        };
        //easemobwebim-sdk收到文本消息的回调方法的实现
        var handleTextMessage = function(message) {
            var from = message.from;//消息的发送者
            var mestype = message.type;//消息发送的类型是群组消息还是个人消息
            var messageContent = message.data;//文本消息体
            //TODO  根据消息体的to值去定位那个群组的聊天记录
            var room = message.to;
            if (mestype == 'groupchat') {
                appendMsg(message.from, message.to, messageContent, mestype);
            } else {
                appendMsg(from, from, messageContent);
            }
        };
        //easemobwebim-sdk收到表情消息的回调方法的实现，message为表情符号和文本的消息对象，文本和表情符号sdk中做了
        //统一的处理，不需要用户自己区别字符是文本还是表情符号。
        var handleEmotion = function(message) {
            var from = message.from;
            var room = message.to;
            var mestype = message.type;//消息发送的类型是群组消息还是个人消息
            if (mestype == 'groupchat') {
                appendMsg(message.from, message.to, message, mestype);
            } else {
                appendMsg(from, from, message);
            }
        };
        //easemobwebim-sdk收到图片消息的回调方法的实现
        var handlePictureMessage = function(message) {
            var filename = message.filename;//文件名称，带文件扩展名
            var from = message.from;//文件的发送者
            var mestype = message.type;//消息发送的类型是群组消息还是个人消息
            var contactDivId = from;
            if (mestype == 'groupchat') {
                contactDivId = groupFlagMark + message.to;
            }
            var options = message;
            // 图片消息下载成功后的处理逻辑
            options.onFileDownloadComplete = function(response, xhr) {
                var objectURL = Easemob.im.Helper.parseDownloadResponse.call(this, response);
                img = document.createElement("img");
                img.onload = function(e) {
                    img.onload = null;
                    window.URL && window.URL.revokeObjectURL && window.URL.revokeObjectURL(img.src);
                };
                img.onerror = function() {
                    img.onerror = null;
                    if (typeof FileReader == 'undefined') {
                        img.alter = "当前浏览器不支持blob方式";
                        return;
                    }
                    img.onerror = function() {
                        img.alter = "当前浏览器不支持blob方式";
                    };
                    var reader = new FileReader();
                    reader.onload = function(event) {
                        img.src = this.result;
                    };
                    reader.readAsDataURL(response);
                }
                img.src = objectURL;
                var pic_real_width = options.width;
                if (!pic_real_width || pic_real_width == 0) {
                    $("<img/>").attr("src", objectURL).load(function() {
                        pic_real_width = this.width;
                        if (pic_real_width > maxWidth) {
                            img.width = maxWidth;
                        } else {
                            img.width = pic_real_width;
                        }
                        appendMsg(from, contactDivId, {
                            data : [ {
                                type : 'pic',
                                filename : filename || '',
                                data : img
                            } ]
                        });
                    });
                } else {
                    if (pic_real_width > maxWidth) {
                        img.width = maxWidth;
                    } else {
                        img.width = pic_real_width;
                    }
                    appendMsg(from, contactDivId, {
                        data : [ {
                            type : 'pic',
                            filename : filename || '',
                            data : img
                        } ]
                    });
                }
            };

            var redownLoadFileNum = 0;
            options.onFileDownloadError = function(e) {
                //下载失败时只重新下载一次
                if(redownLoadFileNum < 1){
                    redownLoadFileNum++;
                    options.accessToken = options_c;
                    Easemob.im.Helper.download(options);

                }else{
                    appendMsg(from, contactDivId, e.msg + ",下载图片" + filename + "失败");
                    redownLoadFileNum = 0;
                }

            };
            //easemobwebim-sdk包装的下载文件对象的统一处理方法。
            Easemob.im.Helper.download(options);
        };
        //easemobwebim-sdk收到音频消息回调方法的实现
        var handleAudioMessage = function(message) {
            var filename = message.filename;
            var filetype = message.filetype;
            var from = message.from;
            var mestype = message.type;//消息发送的类型是群组消息还是个人消息
            var contactDivId = from;
            if (mestype == 'groupchat') {
                contactDivId = groupFlagMark + message.to;
            }
            var options = message;
            options.onFileDownloadComplete = function(response, xhr) {
                var objectURL = Easemob.im.Helper.parseDownloadResponse.call(this, response);
                var audio = document.createElement("audio");
                if (Easemob.im.Helper.getIEVersion() != 9 && ("src" in audio) && ("controls" in audio)) {
                    audio.onload = function() {
                        audio.onload = null;
                        window.URL && window.URL.revokeObjectURL && window.URL.revokeObjectURL(audio.src);
                    };
                    audio.onerror = function() {
                        audio.onerror = null;
                        appendMsg(from, contactDivId, "当前浏览器不支持播放此音频:" + (filename || ''));
                    };
                    audio.controls = "controls";
                    audio.src = objectURL;
                    appendMsg(from, contactDivId, {
                        data : [ {
                            type : 'audio',
                            filename : filename || '',
                            data : audio
                        } ]
                    });
                    //audio.play();
                    return;
                } else {
                    appendMsg(from, contactDivId, {
                        data : [ {
                            type : 'audio',
                            filename : filename || '',
                            data : {currentSrc: objectURL},
                            audioShim: true
                        } ]
                    });
                }
            };
            options.onFileDownloadError = function(e) {
                appendMsg(from, contactDivId, e.msg + ",下载音频" + filename + "失败");
            };
            options.headers = {
                "Accept" : "audio/mp3"
            };
            Easemob.im.Helper.download(options);
        };
        //处理收到文件消息
        var handleFileMessage = function(message) {
            var filename = message.filename;
            var filetype = message.filetype;
            var from = message.from;
            var mestype = message.type;//消息发送的类型是群组消息还是个人消息
            var contactDivId = from;
            if (mestype == 'groupchat') {
                contactDivId = groupFlagMark + message.to;
            }
            var options = message;
            options.onFileDownloadComplete = function(response, xhr) {
                var spans = "收到文件消息:" + filename;
                appendMsg(from, contactDivId, spans);
                return;
            };
            options.onFileDownloadError = function(e) {
                appendMsg(from, contactDivId, e.msg + ",下载文件" + filename + "失败");
            };
            Easemob.im.Helper.download(options);
        };
        //收到视频消息
        var handleVideoMessage = function(message) {
            var filename = message.filename;
            var filetype = message.filetype;
            var from = message.from;
            var mestype = message.type;//消息发送的类型是群组消息还是个人消息
            var contactDivId = from;
            if (mestype == 'groupchat') {
                contactDivId = groupFlagMark + message.to;
            }
            var options = message;
            options.onFileDownloadComplete = function(response, xhr) {
                var spans = "收到视频消息:" + filename;
                appendMsg(from, contactDivId, spans);
            };
            options.onFileDownloadError = function(e) {
                appendMsg(from, contactDivId, e.msg + ",下载音频" + filename + "失败");
            };
            Easemob.im.Helper.download(options);
        };
        var handleLocationMessage = function(message) {
            var from = message.from;
            var to = message.to;
            var mestype = message.type;
            var content = message.addr;
            if (mestype == 'groupchat') {
                appendMsg(from, to, content, mestype);
            } else {
                appendMsg(from, from, content, mestype);
            }
        };
        var handleInviteMessage = function(message) {
            var type = message.type;
            var from = message.from;
            var roomId = message.roomid;
            //获取当前登录人的群组列表
            conn.listRooms({
                success : function(rooms) {
                    if (rooms) {
                        for (i = 0; i < rooms.length; i++) {
                            var roomsName = rooms[i].name;
                            var roomId = rooms[i].roomId;
                            var existRoom = $('#contactgrouplistUL').children(
                                    '#group--' + roomId);
                            if (existRoom && existRoom.length == 0) {
                                var lielem = $('<li>').attr({
                                    'id' : groupFlagMark + roomId,
                                    'class' : 'offline',
                                    'className' : 'offline',
                                    'type' : 'groupchat',
                                    'displayName' : roomsName,
                                    'roomId' : roomId,
                                    'joined' : 'false'
                                }).click(function() {
                                    chooseContactDivClick(this);
                                });
                                $('<img>').attr({
                                    'src' : "/WebYiZhi/Public/webim/img/"+'head/group_normal.png'
                                }).appendTo(lielem);
                                $('<span>').html(roomsName).appendTo(lielem);
                                $('#contactgrouplistUL').append(lielem);
                                //return;
                            }
                        }
                        //cleanListRoomDiv();//先将原群组列表中的内容清除，再将最新的群组列表加入
                        //buildListRoomDiv("contracgrouplist", rooms);//群组列表页面处理
                    }
                },
                error : function(e) {
                }
            });
        };
        var cleanListRoomDiv = function cleanListRoomDiv() {
            $('#contactgrouplistUL').empty();
        };
        //收到陌生人消息时创建陌生人列表
        var createMomogrouplistUL = function createMomogrouplistUL(who, message) {
            var momogrouplistUL = document.getElementById("momogrouplistUL");
            var cache = {};
            if (who in cache) {
                return;
            }
            cache[who] = true;
            var lielem = document.createElement("li");
            $(lielem).attr({
                'id' : who,
                'class' : 'offline',
                'className' : 'offline',
                'type' : 'chat',
                'displayName' : who
            });
            lielem.onclick = function() {
                chooseContactDivClick(this);
            };
            var imgelem = document.createElement("img");
            imgelem.setAttribute("src",  "/WebYiZhi/Public/webim/img/"+"head/contact_normal.png");
            lielem.appendChild(imgelem);
            var spanelem = document.createElement("span");
            spanelem.innerHTML = who;
            lielem.appendChild(spanelem);
            momogrouplistUL.appendChild(lielem);
        };
        //显示聊天记录的统一处理方法
        var appendMsg = function(who, contact, message, chattype) {
            var contactUL = document.getElementById("contactlistUL");
            var contactDivId = contact;
            if (chattype && chattype == 'groupchat') {
                contactDivId = groupFlagMark + contact;
            }
            var contactLi = getContactLi(contactDivId);
            if (contactLi == null) {
                createMomogrouplistUL(who, message);
            }
            // 消息体 {isemotion:true;body:[{type:txt,msg:ssss}{type:emotion,msg:imgdata}]}
            var localMsg = null;
            if (typeof message == 'string') {
                localMsg = Easemob.im.Helper.parseTextMessage(message);
                localMsg = localMsg.body;
            } else {
                localMsg = message.data;
            }
            var headstr = [ "<p1>" + who + "   <span></span>" + "   </p1>",
                "<p2>" + getLoacalTimeString() + "<b></b><br/></p2>" ];
            var header = $(headstr.join(''))
            var lineDiv = document.createElement("div");
            for (var i = 0; i < header.length; i++) {
                var ele = header[i];
                lineDiv.appendChild(ele);
            }
            var messageContent = localMsg;
            for (var i = 0; i < messageContent.length; i++) {
                var msg = messageContent[i];
                var type = msg.type;
                var data = msg.data;

                if (type == "emotion") {
                    var eletext = "<p3><img src='" + data + "'/></p3>";
                    var ele = $(eletext);
                    for (var j = 0; j < ele.length; j++) {
                        lineDiv.appendChild(ele[j]);
                    }
                } else if (type == "pic" || type == 'audio' || type == 'video') {
                    var filename = msg.filename;
                    var fileele = $("<p3>" + filename + "</p3><br>");
                    for (var j = 0; j < fileele.length; j++) {
                        lineDiv.appendChild(fileele[j]);
                    }
                    data.nodeType && lineDiv.appendChild(data);
                    if(type == 'audio' && msg.audioShim) {
                        var d = $(lineDiv),
                                t = new Date().getTime();
                        d.append($('<div class="'+t+'"></div>\
                        <button class="play'+t+'">播放</button><button style="display:none" class="play'+t+'">暂停</button>'));
                    }
                } else {
                    var eletext = "<p3>" + data + "</p3>";
                    var ele = $(eletext);
                    ele[0].setAttribute("class", "chat-content-p3");
                    ele[0].setAttribute("className", "chat-content-p3");
                    if (curUserId == who) {
                        ele[0].style.backgroundColor = "#EBEBEB";
                    }
                    for (var j = 0; j < ele.length; j++) {
                        lineDiv.appendChild(ele[j]);
                    }
                }
            }
            if (curChatUserId == null && chattype == null) {
                setCurrentContact(contact);
                if (time < 1) {
                    $('#accordion3').click();
                    time++;
                }
            }
            if (curChatUserId && curChatUserId.indexOf(contact) < 0) {
                var contactLi = getContactLi(contactDivId);
                if (contactLi == null) {
                    return;
                }
                contactLi.style.backgroundColor = "green";
                var badgespan = $(contactLi).children(".badge");
                if (badgespan && badgespan.length > 0) {
                    var count = badgespan.text();
                    var myNum = new Number(count);
                    myNum++;
                    badgespan.text(myNum);
                } else {
                    $(contactLi).append('<span class="badge">1</span>');
                }
                //联系人不同分组的未读消息提醒
                var badgespanGroup = $(contactLi).parent().parent().parent().prev()
                        .children().children(".badgegroup");
                if (badgespanGroup && badgespanGroup.length == 0) {
                    $(contactLi).parent().parent().parent().prev().children()
                            .append('<span class="badgegroup">New</span>');
                }
            }
            var msgContentDiv = getContactChatDiv(contactDivId);
            if (curUserId == who) {
                lineDiv.style.textAlign = "right";
            } else {
                lineDiv.style.textAlign = "left";
            }
            var create = false;
            if (msgContentDiv == null) {
                msgContentDiv = createContactChatDiv(contactDivId);
                create = true;
            }
            msgContentDiv.appendChild(lineDiv);
            if (create) {
                document.getElementById(msgCardDivId).appendChild(msgContentDiv);
            }
            if(type == 'audio' && msg.audioShim) {
                setTimeout(function(){
                    playAudioShim(d.find('.'+t), data.currentSrc, t);
                }, 0);
            }
            msgContentDiv.scrollTop = msgContentDiv.scrollHeight;
            return lineDiv;
        };
        var showAddFriend = function() {
            $('#addFridentModal').modal('toggle');
            $('#addfridentId').val('好友账号');//输入好友账号
            $('#add-frident-warning').html("");
        };
        //添加输入框鼠标焦点进入时清空输入框中的内容
        var clearInputValue = function(inputId) {
            $('#' + inputId).val('');
        };
        var showDelFriend = function() {
            $('#delFridentModal').modal('toggle');
            $('#delfridentId').val('好友账号');//输入好友账号
            $('#del-frident-warning').html("");
        };
        //消息通知操作时条用的方法
        var showNewNotice = function(message) {
            $('#confirm-block-div-modal').modal('toggle');
            $('#confirm-block-footer-body').html(message);
        };
        var showWarning = function(message) {
            $('#notice-block-div').modal('toggle');
            $('#notice-block-body').html(message);
        };
        //主动添加好友操作的实现方法
        var startAddFriend = function() {
            var user = $('#addfridentId').val();
            if (user == '') {
                $('#add-frident-warning').html(
                        "<font color='#FF0000'> 请输入好友名称</font>");
                return;
            }
            if (bothRoster)
                for (var i = 0; i < bothRoster.length; i++) {
                    if (bothRoster[i].name == user) {
                        $('#add-frident-warning').html(
                                "<font color='#FF0000'> 已是您的好友</font>");
                        return;
                    }
                }
            //发送添加好友请求
            conn.subscribe({
                to : user,
                message : "加个好友呗-" + getLoacalTimeString()
            });
            $('#addFridentModal').modal('hide');
            return;
        };
        //回调方法执行时同意添加好友操作的实现方法
        var agreeAddFriend = function(user) {
            conn.subscribed({
                to : user,
                message : "[resp:true]"
            });
        };
        //拒绝添加好友的方法处理
        var rejectAddFriend = function(user) {
            conn.unsubscribed({
                to : user,
                message : getLoacalTimeString()
            });
        };
        //直接调用删除操作时的调用方法
        var directDelFriend = function() {
            var user = $('#delfridentId').val();
            if (validateFriend(user, bothRoster)) {
                conn.removeRoster({
                    to : user,
                    success : function() {
                        conn.unsubscribed({
                            to : user
                        });
                        //删除操作成功时隐藏掉dialog
                        $('#delFridentModal').modal('hide');
                    },
                    error : function() {
                        $('#del-frident-warning').html(
                                "<font color='#FF0000'>删除联系人失败!</font>");
                    }
                });
            } else {
                $('#del-frident-warning').html(
                        "<font color='#FF0000'>该用户不是你的好友!</font>");
            }
        };
        //判断要删除的好友是否在当前好友列表中
        var validateFriend = function(optionuser, bothRoster) {
            for ( var deluser in bothRoster) {
                if (optionuser == bothRoster[deluser].name) {
                    return true;
                }
            }
            return false;
        };
        //回调方法执行时删除好友操作的方法处理
        var delFriend = function(user) {
            conn.removeRoster({
                to : user,
                groups : [ 'default' ],
                success : function() {
                    conn.unsubscribed({
                        to : user
                    });
                }
            });
        };
        var removeFriendDomElement = function(userToDel, local) {
            var contactToDel;
            if (bothRoster.length > 0) {
                for (var i = 0; i < bothRoster.length; i++) {
                    if (bothRoster[i].name == userToDel) {
                        contactToDel = bothRoster[i];
                        break;
                    }
                }
            }
            if (contactToDel) {
                bothRoster.remove(contactToDel);
            }
            // 隐藏删除好友窗口
            if (local) {
                $('#delFridentModal').modal('hide');
            }
            //删除通讯录
            $('#' + userToDel).remove();
            //删除聊天
            var chatDivId = curUserId + "-" + userToDel;
            var chatDiv = $('#' + chatDivId);
            if (chatDiv) {
                chatDiv.remove();
            }
            if (curChatUserId != userToDel) {
                return;
            } else {
                var displayName = '';
                //将第一个联系人作为当前聊天div
                if (bothRoster.length > 0) {
                    curChatUserId = bothRoster[0].name;
                    $('#' + curChatUserId).css({
                        "background-color" : "#33CCFF"
                    });
                    var currentDiv = getContactChatDiv(curChatUserId)
                            || createContactChatDiv(curChatUserId);
                    document.getElementById(msgCardDivId).appendChild(currentDiv);
                    $(currentDiv).css({
                        "display" : "block"
                    });
                    displayName = '与' + curChatUserId + '聊天中';
                } else {
                    $('#null-nouser').css({
                        "display" : "block"
                    });
                    displayName = '';
                }
                $('#talkTo').html('<a href="#">' + displayName + '</a>');
            }
        };
        //清除聊天记录
        var clearCurrentChat = function clearCurrentChat() {
            var currentDiv = getContactChatDiv(curChatUserId)
                    || createContactChatDiv(curChatUserId);
            currentDiv.innerHTML = "";
        };
        //显示成员列表
        var showRoomMember = function showRoomMember() {
            if (groupQuering) {
                return;
            }
            groupQuering = true;
            queryOccupants(curRoomId);
        };
        //根据roomId查询room成员列表
        var queryOccupants = function queryOccupants(roomId) {
            var occupants = [];
            conn.queryRoomInfo({
                roomId : roomId,
                success : function(occs) {
                    if (occs) {
                        for (var i = 0; i < occs.length; i++) {
                            occupants.push(occs[i]);
                        }
                    }
                    conn.queryRoomMember({
                        roomId : roomId,
                        success : function(members) {
                            if (members) {
                                for (var i = 0; i < members.length; i++) {
                                    occupants.push(members[i]);
                                }
                            }
                            showRoomMemberList(occupants);
                            groupQuering = false;
                        },
                        error : function() {
                            groupQuering = false;
                        }
                    });
                },
                error : function() {
                    groupQuering = false;
                }
            });
        };
        var showRoomMemberList = function showRoomMemberList(occupants) {
            var list = $('#room-member-list')[0];
            var childs = list.childNodes;
            for (var i = childs.length - 1; i >= 0; i--) {
                list.removeChild(childs.item(i));
            }
            for (i = 0; i < occupants.length; i++) {
                var jid = occupants[i].jid;
                var userName = jid.substring(jid.indexOf("_") + 1).split("@")[0];
                var txt = $("<p></p>").text(userName);
                $('#room-member-list').append(txt);
            }
            $('#option-room-div-modal').modal('toggle');
        };
        var showRegist = function showRegist() {
            $('#loginmodal').modal('hide');
            $('#regist-div-modal').modal('toggle');
        };
        var getObjectURL = function getObjectURL(file) {
            var url = null;
            if (window.createObjectURL != undefined) { // basic
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        };
        var getLoacalTimeString = function getLoacalTimeString() {
            var date = new Date();
            var time = date.getHours() + ":" + date.getMinutes() + ":"
                    + date.getSeconds();
            return time;
        }
    </script>
</head>
<body>
<div id="loginmodal" class="modal hide in" role="dialog"
     aria-hidden="true" data-backdrop="static">
    <div class="modal-header">
        <h3>用户登录</h3>
    </div>
    <div class="modal-body">
        <table>
            <tr>
                <td width="65%">
                    <label for="username">用户名:</label>
                    <input type="text" name="username" value="" id="username" tabindex="1"/>
                    <label for="password">密码:</label>
                    <input type="password" name="password" value="" id="password" tabindex="2" />
                    <label for="token">令牌:</label>
                    <input type="text" name="token" value="" id="token" disabled="disabled" tabindex="3" />
                </td>
            </tr>
        </table>
        <label class="checkbox">
            <input type="checkbox" name="usetoken" id="usetoken" tabindex="4" />使用令牌登录
        </label>
    </div>
    <div class="modal-footer">
        <button class="flatbtn-blu" onclick="login()" tabindex="3">登录</button>
        <button class="flatbtn-blu" onclick="showRegist()" tabindex="4">注册</button>
    </div>
</div>

<!-- 注册操作界面 -->
<div id="regist-div-modal" class="alert modal hide" role="dialog"
     aria-hidden="true" data-backdrop="static">
    <div class="modal-header">
        <h3>用户注册</h3>
    </div>
    <div class="modal-body">
        <div id="regist_div" style="overflow-y: auto">
            <table>
                <tr>
                    <td width="65%"><label>用户名:</label> <input type="text"
                                                               value="" id="regist_username" tabindex="1" /> <label>密码:</label>
                        <input type="password" value="" id="regist_password" tabindex="2" />
                        <label>昵称:</label> <input type="text" value=""
                                                  id="regist_nickname" tabindex="3" /></td>
                </tr>
            </table>
        </div>
    </div>
    <div class="modal-footer">
        <button id="confirm-regist-confirmButton" class="btn btn-primary"
                onclick="regist()">完成</button>
        <button id="confirm-regist-cancelButton" class="btn"
                onclick="showlogin()">返回</button>
    </div>
</div>

<div id="waitLoginmodal" class="modal hide" data-backdrop="static">
    <img src="/WebYiZhi/Public/webim/img/waitting.gif">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;正在努力加载中...</img>
</div>
<div class="content" id="content" style="display: none">
    <div class="leftcontact" id="leftcontact">
        <div id="headerimg" class="leftheader">
                <span> <img src="/WebYiZhi/Public/webim/img/head/header.jpg" alt="logo"
                            class="img-circle" width="60px" height="60px"
                            style="margin-top: -40px; margin-left: 20px" /></span> <span
                id="login_user" class="login_user_title"> <a
                class="leftheader-font" href="#"></a>
                </span> <span>
                    <div class="btn-group" style="margin-left: 5px;">
                        <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a href="javascript:;" onclick="showAddFriend()">添加好友</a></li>
                            <li><a href="javascript:;" onclick="showDelFriend()">删除好友</a></li>
                            <li class="divider"></li>
                            <li><a href="javascript:;" onclick="logout();return false;">退出</a></li>
                        </ul>
                    </div>
                </span>
        </div>
        <div id="leftmiddle">
            <!--
            <input style="width: 120px; color: #999999; margin-top: 8px;"
                type="text" id="searchfriend" value="搜索"
                onFocus="if(value==defaultValue){value='';this.style.color='#000'}"
                onBlur="if(!value){value=defaultValue;this.style.color='#999'}" />
            <button id="searchFriend" style="background: #cccccc">查询</button>
        -->
        </div>
        <div id="contractlist11"
             style="height: 492px; overflow-y: auto; overflow-x: auto;">
            <div class="accordion" id="accordionDiv">
                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a id="accordion1" class="accordion-toggle"
                           data-toggle="collapse" data-parent="#accordionDiv"
                           href="#collapseOne">我的好友 </a>
                    </div>
                    <div id="collapseOne" class="accordion-body collapse in">
                        <div class="accordion-inner" id="contractlist">
                            <ul id="contactlistUL" class="chat03_content_ul"></ul>
                        </div>
                    </div>
                </div>
                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a id="accordion2" class="accordion-toggle collapsed"
                           data-toggle="collapse" data-parent="#accordionDiv"
                           href="#collapseTwo">我的群组</a>
                    </div>
                    <div id="collapseTwo" class="accordion-body collapse">
                        <div class="accordion-inner" id="contracgrouplist">
                            <ul id="contactgrouplistUL" class="chat03_content_ul"></ul>
                        </div>
                    </div>
                </div>
                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a id="accordion3" class="accordion-toggle collapsed"
                           data-toggle="collapse" data-parent="#accordionDiv"
                           href="#collapseThree">陌生人</a>
                    </div>
                    <div id="collapseThree" class="accordion-body collapse">
                        <div class="accordion-inner" id="momogrouplist">
                            <ul id="momogrouplistUL" class="chat03_content_ul"></ul>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div id="rightTop" style="height: 78px;"></div>
    <!-- 聊天页面 -->
    <div class="chatRight">
        <div id="chat01">
            <div class="chat01_title">
                <ul class="talkTo">
                    <li id="talkTo"><a href="#"></a></li>
                    <li id="recycle" style="float: right;"><img
                            src="/WebYiZhi/Public/webim/img/recycle.png" onclick="clearCurrentChat();"
                            style="margin-right: 15px; cursor: hand; width: 18px;" title="清屏" /></li>
                    <li id="roomInfo" style="float: right;"><img
                            id="roomMemberImg"
                            src="/WebYiZhi/Public/webim/img/head/find_more_friend_addfriend_icon.png"
                            onclick="showRoomMember();"
                            style="margin-right: 15px; cursor: hand; width: 18px; display: none"
                            title="群组成员" /></li>
                </ul>
            </div>
            <div id="null-nouser" class="chat01_content"></div>
        </div>

        <div class="chat02">
            <div class="chat02_title">
                <a class="chat02_title_btn ctb01" onclick="showEmotionDialog()"
                   title="选择表情"></a> <a class="chat02_title_btn ctb03" title="选择图片"
                                        onclick="showSendPic()" href="#"> </a> <a
                    class="chat02_title_btn ctb02" onclick="showSendAudio()" href="#"
                    title="选择语音"><span></span></a> <label id="chat02_title_t"></label>
                <div id="wl_faces_box" class="wl_faces_box">
                    <div class="wl_faces_content">
                        <div class="title">
                            <ul>
                                <li class="title_name">常用表情</li>
                                <li class="wl_faces_close"><span
                                        onclick='turnoffFaces_box()'>&nbsp;</span></li>
                            </ul>
                        </div>
                        <div id="wl_faces_main" class="wl_faces_main">
                            <ul id="emotionUL">
                            </ul>
                        </div>
                    </div>
                    <div class="wlf_icon"></div>
                </div>
            </div>
            <div id="input_content" class="chat02_content">
                <textarea id="talkInputId" style="resize: none;"></textarea>
            </div>
            <div class="chat02_bar">
                <ul>
                    <li style="right: 5px; top: 5px;"><img src="/WebYiZhi/Public/webim/img/send_btn.jpg"
                                                           onclick="sendText()" /></li>
                </ul>
            </div>

            <div style="clear: both;"></div>
        </div>
        <div id="fileModal" class="modal hide" role="dialog"
             aria-hidden="true" data-backdrop="static">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">&times;</button>
                <h3>文件选择框</h3>
            </div>
            <div class="modal-body">
                <input type='file' id="fileInput" /> <input type='hidden'
                                                            id="sendfiletype" />
                <div id="send-file-warning"></div>
            </div>
            <div class="modal-footer">
                <button id="fileSend" class="btn btn-primary" onclick="sendFile()">发送</button>
                <button id="cancelfileSend" class="btn" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>

    <div id="addFridentModal" class="modal hide" role="dialog"
         aria-hidden="true" data-backdrop="static">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"
                    aria-hidden="true">&times;</button>
            <h3>添加好友</h3>
        </div>
        <div class="modal-body">
            <input id="addfridentId" onfocus='clearInputValue("addfridentId")' />
            <div id="add-frident-warning"></div>
        </div>
        <div class="modal-footer">
            <button id="addFridend" class="btn btn-primary"
                    onclick="startAddFriend()">添加</button>
            <button id="cancelAddFridend" class="btn" data-dismiss="modal">取消</button>
        </div>
    </div>

    <div id="delFridentModal" class="modal hide" role="dialog"
         aria-hidden="true" data-backdrop="static">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"
                    aria-hidden="true">&times;</button>
            <h3>删除好友</h3>
        </div>
        <div class="modal-body">
            <input id="delfridentId" onfocus='clearInputValue("delfridentId")' />
            <div id="del-frident-warning"></div>
        </div>
        <div class="modal-footer">
            <button id="delFridend" class="btn btn-primary"
                    onclick="directDelFriend()">删除</button>
            <button id="canceldelFridend" class="btn" data-dismiss="modal">取消</button>
        </div>
    </div>

    <!-- 一般消息通知 -->
    <div id="notice-block-div" class="modal hide">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <div class="modal-body">
            <h4>Warning!</h4>
            <div id="notice-block-body"></div>
        </div>
    </div>

    <!-- 确认消息通知 -->
    <div id="confirm-block-div-modal" class="modal hide"
         role="dialog" aria-hidden="true" data-backdrop="static">
        <div class="modal-header">
            <h3>订阅通知</h3>
        </div>
        <div class="modal-body">
            <div id="confirm-block-footer-body"></div>
        </div>
        <div class="modal-footer">
            <button id="confirm-block-footer-confirmButton"
                    class="btn btn-primary">同意</button>
            <button id="confirm-block-footer-cancelButton" class="btn"
                    data-dismiss="modal">拒绝</button>
        </div>
    </div>

    <!-- 群组成员操作界面 -->
    <div id="option-room-div-modal" class="alert modal hide"
         role="dialog" aria-hidden="true" data-backdrop="static">
        <button type="button" class="close" data-dismiss="modal"
                aria-hidden="true">&times;</button>
        <div class="modal-header">
            <h3>群组成员</h3>
        </div>
        <div class="modal-body">
            <div id="room-member-list" style="height: 100px; overflow-y: auto"></div>
        </div>
    </div>
</div>
</body>
</html>